<template>
	<view style="position:absolute;top:0;left:0;right:0;bottom:0;display: flex;
	justify-content: center;align-items: center;background-color:rgba(0, 0, 0, 0.5);"
	    :style="{transform:show?'translateX(0)':'translateX(100%)'}"
	>
		
		<!-- #ifdef MP-WEIXIN -->
		<view v-if="show" style="position: absolute;top:124upx;left:20upx;">
			<ad-custom :unit-id="adGridYi"></ad-custom>
		</view>
		<!-- #endif -->
		
		<view class="awga-transform" style="width:500upx;height:600upx;background-color:#fff;
		display:flex;align-items:center;justify-content:center;border-radius:18px;"
		    :style="{
				transform:content?'scale(1)':'scale(0.4)',
				opacity:content?1:0.4
			}"
		>
			
			<view style="display: flex;flex-direction: column;align-items: center;">
				
				<view v-if="state" class="awga-complete-ok"></view>
				<view v-else class="awga-complete-no"></view>
				
				<view style="font-size:38upx;font-weight:bold;"
				    :style="{color:state?'#2C405A':'#999'}"
				>
					{{state?'闯关成功':'闯关失败'}}
				</view>
				
				
				<view @click="startClick" style="background-color:#fbbd08;border-radius:100px;text-align:center;margin-top:40upx;width:240upx;">
					<view style="padding:16upx;color:#2C405A;font-size: 30upx;">
						{{state?'下一关':'重玩本关'}}
					</view>
				</view>
				
				<button open-type="share" class="share-empty">
					<view style="background-color:#00bcd4;border-radius:100px;text-align:center;margin-top:40upx;width:240upx;">
						<view style="padding:16upx;display:flex;align-items:center;justify-content:center;">
							<view style="color:#fff;font-size:30upx;">分享 +50</view>
							<view class="awga-jinbi-dan"></view>
						</view>
					</view>
				</button>
				
				<view style="margin-top:4upx;display:flex;align-items:center;justify-content:center;">
				    <view style="color:#2C405A;font-size:20upx;">邀请新用户进入游戏得50</view>
					<view class="awga-jinbi-dan"></view>
				</view>
				
			</view>
			
		</view>
		
		
	</view>
</template>

<script>
	import siteinfo from "./siteinfo.js";
	export default {
		name: "haichongComplete",
		data() {
			return {
				adGridYi: siteinfo.adGridYi,
				state: false,
				show: false,
				content: false
			};
		},
		methods: {
			awgaShow: function(type){
				this.state = type;
				this.show = true;
				this.content = true;
			},
			awgaHide: function() {
				var _me = this;
				_me.show = false;
				setTimeout(() => {
					_me.content = false;
				},50);
			},
			startClick: function() {
				this.$emit('startClick',this.state);
				this.awgaHide();
			}
		}
	}
</script>

<style scoped>
	
	.awga-transform{
		transition-timing-function: ease;
		transition-duration: 0.3s;
		transition-property: transform,opacity;
	}
	
	.awga-jinbi-dan{
		width:40upx;height:40upx;
		background-image: url('');
	    background-repeat:no-repeat;
	    background-size:100%;
	}
	
	.awga-complete-ok{
		width:146px;height:128px;
		background-image: url('');
	    background-repeat:no-repeat;
	    background-size:100%;
	}
	.awga-complete-no{
		width:146px;height:128px;
		background-image: url('');
	    background-repeat:no-repeat;
	    background-size:100%;
	}
	
	/* 微信分享按钮 */
	.share-empty::after {
	    border: none;
	}
	.share-empty.plain {
	    border: none;
	    border-color: transparent;
	}
	.share-empty.button-hover{
	    background-color: transparent;
	}
	.share-empty{
	    line-height:0upx;
	    background-color: transparent;
	    padding-bottom: 0rpx;
		padding-left: 0rpx;
		padding-right: 0rpx;
		padding-top: 0rpx;
	}
</style>
